<template>

  <div>

    <div class="box">
      <div class="title" style="margin-top: 30px">
        <span>角色列表</span>
        <el-button type="primary" @click="isShowSave=true" class="enterpriseBtn">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" row-key="id" border :header-cell-style="{
          'text-align': 'center', 'font-size': '16px', color: '#666666', borderColor: '#e0e0e0',
        }" :cell-style="{ 'text-align': 'center', 'font-size': '14px', color: '#666666', borderColor: '#e0e0e0', }">

        <el-table-column type="index" label="序号" width="80" />

        <el-table-column prop="name" label="角色名称" />

        <el-table-column prop="code" label="编码" />
        <el-table-column prop="note" label="备注" />

        <el-table-column prop="status" label="状态">
          <template v-slot="{ row }">
            <el-tag v-if="row.status == 0">禁用</el-tag>
            <el-tag v-else-if="row.status == 1">启用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button @click="mod(row)">修改</el-button>
            <el-button @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--新增组件-->
    <save :visible="isShowSave" @close="isShowSave=false" @refresh="initData"></save>

    <!--修改组件-->
    <update ref="updateRef" :visible="isShowUpdate" @close="isShowUpdate =false" @refresh="initData"></update>
  </div>

</template>

<script setup>
import save from './save.vue'
import update from './update.vue'
import { ref, onMounted } from 'vue'
import { queryRole, deleteRole } from '@/api/sys/role.js'
import { ElMessage, ElMessageBox } from 'element-plus'
//属性

//组件属性
const isShowSave = ref(false) //是否显示保存组件
const isShowUpdate = ref(false) //是否显示修改组件
const updateRef = ref(null)

//角色列表
const tableData = ref([])




//方法

//初始化  角色列表
let initData = async () => {
  let res = await queryRole()

  if (res.code == 200) {
    tableData.value=res.data
  }
}

//修改
function mod(row) {
  isShowUpdate.value = true;
  updateRef.value.init(row);
}

//删除
//删除弹出框
let del = (id) => {
  ElMessageBox.confirm('确认删除吗?')
    .then(() => {
      removeRole(id)
    })
    .catch(() => {

    })
}
//删除方法
let removeRole = async (id) => {
  let res = await deleteRole(id)
  if (res.code == 200) {
    ElMessage({
      message: "删除成功",
      type: "success"
    })
    initData()
  }
}

//生命周期函数
onMounted(() => {
  initData()
})

</script>

<style scope>
* {
  padding: 0;
  margin: 0;
}

.box {
  margin-right: 200px;
}

.title {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 15px;
  color: #666666;
}

.cont {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  height: 60px;
  line-height: 60px;
}

.enterpriseBtn {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>